<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="l-loginInfo">
              <img :src="getImg()" alt="">
            </div>
            <div class="r-loginInfo">
              <p>Admin</p>
              <p>超级管理员</p>
            </div>

          </div>
        </template>
        <div class="card-foot" >
          <p>上次登录时间:<span v-once>{{ dateTime }}</span></p>
          <p>上次登录地点:<span>北京</span></p>
        </div>
      </el-card>
      <el-card style="margin-top:12px" shadow="hover" height="40px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column v-for="(val, key) in tableLable" :key="key" :prop="key" :label="val" />
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="card">
        <el-card :body-style="{ padding: 0, display: 'flex' }" shadow="hover" v-for="item in cardData" :key="item.name">
          <el-icon :style="{ backgroundColor: item.color }">
            <component class="icon" :is="item.icon"></component>
          </el-icon>
          <div class="text">
            <p>￥{{ item.value }}</p>
            <p>{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <el-card shadow="hover" :body-style="{ height: '220px', padding: 0 }">
        <div :style="{height: '230px',position:'relative',top:'10px'}" ref="echarts"></div>
      </el-card>
      <div class="ch">
        <!-- 柱状图 -->
        <el-card shadow="hover" :body-style="{ padding: 0 }">
          <div :style="{height: '210px',top:'20px'}" ref="userecherts"></div>
        </el-card>
        <!-- 饼图 -->
        <el-card shadow="hover" :body-style="{ padding: 0 }">
          <div :style="{height: '160px',top:'15px'}" ref="videoecherts"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang = 'ts'>
import { onMounted, reactive, ref, getCurrentInstance } from "vue"
import axios from 'axios'
import * as echarts from "echarts";

const getImg = () => new URL('../../assets/images/avter4.webp', import.meta.url).href
let tableData = ref([])
// 右上角卡片数据
let cardData: any = ref([])
interface Table {
  name: String
  todayBuy: string
  monthBuy: string
  totalBuy: string
}
const tableLable: Table = {
  name: '品牌',
  todayBuy: '今日购买',
  monthBuy: '本月购买',
  totalBuy: '总购买'
}

onMounted(() => {
  getTableData()
  getCardData()
  getData()
})
let dateTime = new Date().toLocaleString()
const app = getCurrentInstance()
const getTableData = async () => {
  // const res = await axios.get('https://www.fastmock.site/mock/f44a3a709364126cbd8dac2abb5fc00a/api/home/getHomeData')
  // if(res.data.code===200){
  //   tableData.value = res.data.data
  // }
  const res = await app?.proxy?.$api.getHomeData();
  tableData.value = res

}
// 获取右上角数据
const getCardData = async () => {
  const res = await app?.proxy?.$api.getHomeCard();
  cardData.value = res
  // console.log(cardData.value[0]);

}
const userOption = ref({
    legend: {
      // 图例文字颜色
      textStyle: {
        color: "#333",
      },
    },
    grid: {
      left: "20%",
    },
    // 提示框
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category", // 类目轴
      data:[],
      axisLine: {
        lineStyle: {
          color: "#17b3a3",
        },
      },
      axisLabel: {
        interval: 0,
        color: "#333",
      },
    },
    yAxis: [
      {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#17b3a3",
          },
        },
      },
    ],
    color: ["#2ec7c9", "#b6a2de"],
    series: [
      {
        name: "新增用户",
        data: {},
        type: "bar",
      },
      {
        name: "活跃用户",
        data: {},
        type: "bar",
      },
    ],
  });
// 获取echarts
const getData = async () => {
  const res = await app?.proxy?.$api.getHomeEcharts();
  // 折线图实现
  const order = reactive(res.orderData);
  const xData = order.date;
  const keyArray = Object.keys(order.data[0]);
  const series:any = reactive([]);
  keyArray.forEach((key) => {
    series.push({
      name: key,
      data: order.data.map((item:any) => item[key]),
      type: "line",
    });
  });
  const option = reactive({
    xAxis: {
      data: xData,
    },
    yAxis: {},
    legend: {
      data: keyArray,
    },
    series,
  });
  const E = echarts.init(app?.proxy?.$refs['echarts'] as HTMLElement);
  E.setOption(option);
  // 柱状图实现
  userOption.value.xAxis.data =  res.userData.map((item:any) => item.date);
  userOption.value.series[0].data = res.userData.map((item:any) => item.new)
  userOption.value.series[1].data = res.userData.map((item:any) => item.active)
  const U = echarts.init(app?.proxy?.$refs['userecherts'] as HTMLElement);
  U.setOption(userOption.value);
  // 饼图实现
  const videoOption = {
    tooltip: {
      trigger: "item",
    },
    color: [
      "#0f78f4",
      "#dd536b",
      "#9462e5",
      "#a6a6a6",
      "#e1bb22",
      "#39c362",
      "#3ed1cf",
    ],
    series: [
      {
        data: res.videoData,
        type: 'pie'
      }
    ],
  }
  const V = echarts.init(app?.proxy?.$refs['videoecherts'] as HTMLElement)
  V.setOption(videoOption)

}
</script>

<style lang="less" scoped>
.el-col {
  margin-top: 10px;
}

.home {

  .card-header {
    display: flex;
    align-items: center;

    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    .r-loginInfo {
      margin-left: 40px;

      &>p:first-child {
        font-weight: bold;
      }

      &>p:last-child {
        margin-top: 12px;
        color: gray;
        font-size: 10px;
      }
    }
  }

  .card-foot {
    color: gray;
    font-size: 13px;

    p:first-of-type {
      margin-bottom: 8px;
    }

    span {
      margin-left: 20px;
    }
  }

  .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-card {
      width: 32%;
      height: 40px;
      margin-bottom: 10px;

      .el-icon {
        width: 40px;
        height: 40px;
        font-size: 25px;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 5px;

        p:first-child {
          font-size: 13px;
          font-weight: bold;
        }

        p:last-child {
          margin-top: 5px;
          font-size: 5px;
          color: gray;
        }
      }

    }



  }

  .ch {
    height: 190px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .el-card {
      width: 338px;
      height: 100%,
     
    }
  }
}
</style>
